<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>vscode的插件推荐 | 地球反三体组织</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="icon" href="/icons/favicon.ico">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.2/jquery.fancybox.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.2/jquery.fancybox.min.css">
    <meta name="description" content="">
    
    <link rel="preload" href="/assets/css/0.styles.95f09eca.css" as="style"><link rel="preload" href="/assets/js/app.892efb48.js" as="script"><link rel="preload" href="/assets/js/3.3689c535.js" as="script"><link rel="preload" href="/assets/js/1.76946483.js" as="script"><link rel="preload" href="/assets/js/14.791ae1f2.js" as="script"><link rel="prefetch" href="/assets/js/10.994dfc46.js"><link rel="prefetch" href="/assets/js/11.5243d02b.js"><link rel="prefetch" href="/assets/js/12.bbc947db.js"><link rel="prefetch" href="/assets/js/13.3c555110.js"><link rel="prefetch" href="/assets/js/15.41a71b1f.js"><link rel="prefetch" href="/assets/js/16.ea9f6e56.js"><link rel="prefetch" href="/assets/js/17.8d9b3f45.js"><link rel="prefetch" href="/assets/js/18.990bf501.js"><link rel="prefetch" href="/assets/js/19.37c1c21a.js"><link rel="prefetch" href="/assets/js/20.5aae01e6.js"><link rel="prefetch" href="/assets/js/21.41e758f1.js"><link rel="prefetch" href="/assets/js/22.afc2de9d.js"><link rel="prefetch" href="/assets/js/23.7a76c57a.js"><link rel="prefetch" href="/assets/js/24.ee89a782.js"><link rel="prefetch" href="/assets/js/25.aae5f43e.js"><link rel="prefetch" href="/assets/js/26.eec74c57.js"><link rel="prefetch" href="/assets/js/27.cdae5890.js"><link rel="prefetch" href="/assets/js/28.85c693b7.js"><link rel="prefetch" href="/assets/js/29.d40f3724.js"><link rel="prefetch" href="/assets/js/30.cdb0bfe0.js"><link rel="prefetch" href="/assets/js/31.f83a512c.js"><link rel="prefetch" href="/assets/js/32.87779683.js"><link rel="prefetch" href="/assets/js/33.e9f606e7.js"><link rel="prefetch" href="/assets/js/34.6b5688ff.js"><link rel="prefetch" href="/assets/js/35.a0ba89c1.js"><link rel="prefetch" href="/assets/js/36.18a00568.js"><link rel="prefetch" href="/assets/js/37.fd83be59.js"><link rel="prefetch" href="/assets/js/38.cf0ec149.js"><link rel="prefetch" href="/assets/js/39.3a424296.js"><link rel="prefetch" href="/assets/js/4.4ef4e9bb.js"><link rel="prefetch" href="/assets/js/40.3ac4f22a.js"><link rel="prefetch" href="/assets/js/41.f4119124.js"><link rel="prefetch" href="/assets/js/42.926201e5.js"><link rel="prefetch" href="/assets/js/43.b8af425d.js"><link rel="prefetch" href="/assets/js/44.b5af9721.js"><link rel="prefetch" href="/assets/js/45.2cf05349.js"><link rel="prefetch" href="/assets/js/46.6ef53d5a.js"><link rel="prefetch" href="/assets/js/47.0c0d1d6f.js"><link rel="prefetch" href="/assets/js/48.afcf25ca.js"><link rel="prefetch" href="/assets/js/49.56f7da91.js"><link rel="prefetch" href="/assets/js/5.152764ca.js"><link rel="prefetch" href="/assets/js/50.6dbb0658.js"><link rel="prefetch" href="/assets/js/6.8ab23831.js"><link rel="prefetch" href="/assets/js/7.b1119581.js"><link rel="prefetch" href="/assets/js/8.ebb978a3.js"><link rel="prefetch" href="/assets/js/9.a72af8f5.js">
    <link rel="stylesheet" href="/assets/css/0.styles.95f09eca.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container no-sidebar" data-v-73b6f1b4><div data-v-73b6f1b4><div id="loader-wrapper" class="loading-wrapper" data-v-d48f4d20 data-v-73b6f1b4 data-v-73b6f1b4><div class="loader-main" data-v-d48f4d20><div data-v-d48f4d20></div><div data-v-d48f4d20></div><div data-v-d48f4d20></div><div data-v-d48f4d20></div></div> <!----> <!----></div> <div class="password-shadow password-wrapper-out" style="display:none;" data-v-58d5ab76 data-v-73b6f1b4 data-v-73b6f1b4><h3 class="title" style="display:none;" data-v-58d5ab76 data-v-58d5ab76>地球反三体组织</h3> <!----> <label id="box" class="inputBox" style="display:none;" data-v-58d5ab76 data-v-58d5ab76><input type="password" value="" data-v-58d5ab76> <span data-v-58d5ab76>Konck! Knock!</span> <button data-v-58d5ab76>OK</button></label> <div class="footer" style="display:none;" data-v-58d5ab76 data-v-58d5ab76><span data-v-58d5ab76><i class="iconfont reco-theme" data-v-58d5ab76></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-58d5ab76>vuePress-theme-reco</a></span> <span data-v-58d5ab76><i class="iconfont reco-copyright" data-v-58d5ab76></i> <a data-v-58d5ab76><span data-v-58d5ab76>kuangw</span>
            
          <!---->
          2020
        </a></span></div></div> <div class="hide" data-v-73b6f1b4><header class="navbar" data-v-73b6f1b4><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <div class="pt-bgBar"></div> <a href="/" class="home-link router-link-active"><img src="/images/logo.png" alt="地球反三体组织" class="logo"> <span class="site-name">地球反三体组织</span></a> <div class="links"><div><div class="my-color isDrak"><div class="div1"><img src="http://photo.tuituisoft.com/picgo/20201202095920.png" alt></div> <div class="div2"><img src="http://photo.tuituisoft.com/picgo/20201202095945.png" alt></div></div></div> <div class="search-box"><i class="iconfont reco-search"></i> <input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link"><i class="iconfont iconfont iconhome"></i>
  Home
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      Category
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/book/" class="nav-link"><i class="iconfont undefined"></i>
  book
</a></li><li class="dropdown-item"><!----> <a href="/categories/code/" class="nav-link"><i class="iconfont undefined"></i>
  code
</a></li><li class="dropdown-item"><!----> <a href="/categories/tool/" class="nav-link"><i class="iconfont undefined"></i>
  tool
</a></li></ul></div></div><div class="nav-item"><a href="/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  Tag
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont undefined"></i>
      工具
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/tool/vuepress/" class="nav-link"><i class="iconfont undefined"></i>
  vuepress(博客框架)
</a></li><li class="dropdown-item"><!----> <a href="/tool/picgo.html" class="nav-link"><i class="iconfont undefined"></i>
  PicGo(图床工具)
</a></li><li class="dropdown-item"><h4>vscode</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/tool/vscode/plug-recommend.html" aria-current="page" class="nav-link router-link-exact-active router-link-active"><i class="iconfont undefined"></i>
  vscode插件推荐
</a></li><li class="dropdown-subitem"><a href="/tool/vscode/diy-code.html" class="nav-link"><i class="iconfont undefined"></i>
  如何自定义vscode的代码块
</a></li><li class="dropdown-subitem"><a href="/tool/vscode/code-block.html" class="nav-link"><i class="iconfont undefined"></i>
  常用代码块
</a></li></ul></li></ul></div></div><div class="nav-item"><a href="/timeline/" class="nav-link"><i class="iconfont reco-date"></i>
  时间线
</a></div> <a href="https://gitee.com/kuangweiwudi/my-node" target="_blank" rel="noopener noreferrer" class="repo-link"><i class="iconfont reco-github"></i>
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask" data-v-73b6f1b4></div> <aside class="sidebar" data-v-73b6f1b4><div class="personal-info-wrapper" data-v-3eba7259 data-v-73b6f1b4><img src="http://image.woai996.com/picgo/20201127101131.png" alt="author-avatar" class="personal-img" data-v-3eba7259> <h3 class="name" data-v-3eba7259>
    kuangw
  </h3> <div class="num" data-v-3eba7259><div data-v-3eba7259><h3 data-v-3eba7259>29</h3> <h6 data-v-3eba7259>Article</h6></div> <div data-v-3eba7259><h3 data-v-3eba7259>22</h3> <h6 data-v-3eba7259>Tag</h6></div></div> <hr data-v-3eba7259></div> <nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link"><i class="iconfont iconfont iconhome"></i>
  Home
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      Category
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/book/" class="nav-link"><i class="iconfont undefined"></i>
  book
</a></li><li class="dropdown-item"><!----> <a href="/categories/code/" class="nav-link"><i class="iconfont undefined"></i>
  code
</a></li><li class="dropdown-item"><!----> <a href="/categories/tool/" class="nav-link"><i class="iconfont undefined"></i>
  tool
</a></li></ul></div></div><div class="nav-item"><a href="/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  Tag
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont undefined"></i>
      工具
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/tool/vuepress/" class="nav-link"><i class="iconfont undefined"></i>
  vuepress(博客框架)
</a></li><li class="dropdown-item"><!----> <a href="/tool/picgo.html" class="nav-link"><i class="iconfont undefined"></i>
  PicGo(图床工具)
</a></li><li class="dropdown-item"><h4>vscode</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/tool/vscode/plug-recommend.html" aria-current="page" class="nav-link router-link-exact-active router-link-active"><i class="iconfont undefined"></i>
  vscode插件推荐
</a></li><li class="dropdown-subitem"><a href="/tool/vscode/diy-code.html" class="nav-link"><i class="iconfont undefined"></i>
  如何自定义vscode的代码块
</a></li><li class="dropdown-subitem"><a href="/tool/vscode/code-block.html" class="nav-link"><i class="iconfont undefined"></i>
  常用代码块
</a></li></ul></li></ul></div></div><div class="nav-item"><a href="/timeline/" class="nav-link"><i class="iconfont reco-date"></i>
  时间线
</a></div> <a href="https://gitee.com/kuangweiwudi/my-node" target="_blank" rel="noopener noreferrer" class="repo-link"><i class="iconfont reco-github"></i>
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <!----> </aside> <div class="password-shadow password-wrapper-in" style="display:none;" data-v-58d5ab76 data-v-73b6f1b4><h3 class="title" style="display:none;" data-v-58d5ab76 data-v-58d5ab76>vscode的插件推荐</h3> <!----> <label id="box" class="inputBox" style="display:none;" data-v-58d5ab76 data-v-58d5ab76><input type="password" value="" data-v-58d5ab76> <span data-v-58d5ab76>Konck! Knock!</span> <button data-v-58d5ab76>OK</button></label> <div class="footer" style="display:none;" data-v-58d5ab76 data-v-58d5ab76><span data-v-58d5ab76><i class="iconfont reco-theme" data-v-58d5ab76></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-58d5ab76>vuePress-theme-reco</a></span> <span data-v-58d5ab76><i class="iconfont reco-copyright" data-v-58d5ab76></i> <a data-v-58d5ab76><span data-v-58d5ab76>kuangw</span>
            
          <!---->
          2020
        </a></span></div></div> <div data-v-73b6f1b4><main class="page"><div class="page-title" style="display:none;position:relative;"><div class="page-bg-img"><img src="https://w.wallhaven.cc/full/wq/wallhaven-wqov66.jpg"></div> <h1>vscode的插件推荐</h1> <hr> <div data-v-523cfaee><i class="iconfont reco-account" data-v-523cfaee><span data-v-523cfaee>kuangw</span></i> <i class="iconfont reco-date" data-v-523cfaee><span data-v-523cfaee>2020-11-23</span></i> <i class="iconfont reco-eye" data-v-523cfaee><span id="/tool/vscode/plug-recommend.html" data-flag-title="Your Article Title" class="leancloud-visitors" data-v-523cfaee><a class="leancloud-visitors-count" style="font-size:.9rem;font-weight:normal;color:#d6dce5;"></a></span></i> <i class="iconfont reco-tag tags" data-v-523cfaee><span class="tag-item" data-v-523cfaee>vscode</span><span class="tag-item" data-v-523cfaee>工具</span></i></div></div> <div class="theme-reco-content content__default" style="display:none;"><h1 id="vscode的插件推荐"><a href="#vscode的插件推荐" class="header-anchor">#</a> vscode的插件推荐</h1> <h2 id="前言"><a href="#前言" class="header-anchor">#</a> 前言</h2> <div class="custom-block tip"><ul><li>vscode之所以强大，受大多数人喜欢，一方面是它足够强，另一方面就是它的插件非常骚</li> <li>下面我会对我所用过的觉得不错的插件进行整理，从实用性，美观性，针对性，风骚性来像大家展示各类的插件</li></ul></div> <h2 id="前端篇"><a href="#前端篇" class="header-anchor">#</a> 前端篇</h2> <h3 id="live-server"><a href="#live-server" class="header-anchor">#</a> Live Server</h3> <div class="custom-block tip"><p>live server 启动后会在当前的目录运行一个本地服务器，当你的页面更改时，会实时的对页面进行热更新</p> <ul><li><img src="https://raw.githubusercontent.com/ritwickdey/vscode-live-server/master/images/Screenshot/vscode-live-server-explorer-menu-demo-1.gif" alt="alt"></li></ul></div> <h3 id="open-in-browser"><a href="#open-in-browser" class="header-anchor">#</a> open in browser</h3> <div class="custom-block tip"><p>这个插件和上面的插件功能类似，安装后在<code>.html</code>右键后就会出现<code>open in browser</code>的选项，跟上面的插件相比，运用于调试不那么频繁的项目或者写一些小demo</p></div> <h3 id="easy-sass-和-easy-less"><a href="#easy-sass-和-easy-less" class="header-anchor">#</a> easy sass 和 easy less</h3> <div class="custom-block tip"><p>如果你也和我一样，喜欢使用sass和less那么这两个插件也是必装的了，当你按下<code>ctrl+s</code>时，会自动的在目录中生成一个<code>.css</code>后缀的同名文件，这两个插件支持配置，可以运用于更多的场景</p></div> <h4 id="easy-sass-的配置"><a href="#easy-sass-的配置" class="header-anchor">#</a> easy sass 的配置</h4> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
 <span class="token property">&quot;easysass.formats&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>

    <span class="token punctuation">{</span>
      <span class="token property">&quot;format&quot;</span><span class="token operator">:</span> <span class="token string">&quot;expanded&quot;</span><span class="token punctuation">,</span>
      <span class="token comment">// format 的合法值</span>
      <span class="token comment">//nested：嵌套缩进的 css 代码。</span>
      <span class="token comment">//expanded：没有缩进的、扩展的css代码。</span>
      <span class="token comment">//compact：简洁格式的 css 代码。</span>
      <span class="token comment">//compressed：压缩后的 css 代码</span>
      <span class="token property">&quot;extension&quot;</span><span class="token operator">:</span> <span class="token string">&quot;.css&quot;</span> <span class="token comment">//设置编译输出的文件名</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
        <span class="token property">&quot;format&quot;</span><span class="token operator">:</span> <span class="token string">&quot;compressed&quot;</span><span class="token punctuation">,</span>
        <span class="token property">&quot;extension&quot;</span><span class="token operator">:</span> <span class="token string">&quot;.min.css&quot;</span> <span class="token comment">//设置编译输出的文件名</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token property">&quot;easysass.targetDir&quot;</span><span class="token operator">:</span> <span class="token string">&quot;./css/&quot;</span> <span class="token comment">//提供 css 输出路径的设置（可以是绝对路径或者相对路径） 可以选填，如果不配置则默认是同路径之下</span>
<span class="token punctuation">}</span>

</code></pre></div><h4 id="easy-less-的配置"><a href="#easy-less-的配置" class="header-anchor">#</a> easy less 的配置</h4> <div class="language-json extra-class"><pre class="language-json"><code>
<span class="token property">&quot;less.compile&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;out&quot;</span><span class="token operator">:</span> <span class="token string">&quot;../css/app.css&quot;</span><span class="token punctuation">,</span> <span class="token comment">//定义好输出的文件路径</span>
    <span class="token property">&quot;autoprefixer&quot;</span><span class="token operator">:</span> <span class="token string">&quot;&gt; 5%, last 2 Chrome versions, not ie 6-9&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 暂时不知道有什么用</span>
    <span class="token property">&quot;compress&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否删除多余空白字符  打开相当于压缩</span>
    <span class="token property">&quot;sourceMap&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 是否创建文件目录树，true的话会自动生成一个 .css.map 文件</span>
    <span class="token property">&quot;outExt&quot;</span><span class="token operator">:</span> <span class="token string">&quot;.wxss&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 输出文件的后缀,默认为.css</span>
  <span class="token punctuation">}</span>

</code></pre></div><div class="custom-block tip"><p>可以选择在全局或者只在工作区配置，关于配置的具体操作，如果不了解的，会在下面进行统一的说明</p></div> <h3 id="auto-rename-tag"><a href="#auto-rename-tag" class="header-anchor">#</a> Auto Rename Tag</h3> <div class="custom-block tip"><p><strong><code>Auto Rename Tag</code></strong> 在你更改标签时，会自动的去更改闭合标签的内容</p> <ul><li><img src="https://github.com/formulahendry/vscode-auto-rename-tag/raw/master/images/usage.gif" alt="alt"></li></ul></div> <h3 id="auto-close-tag"><a href="#auto-close-tag" class="header-anchor">#</a> Auto Close Tag</h3> <div class="custom-block tip"><p><strong><code>Auto Close Tag</code></strong> 会自动的生成一个闭合标签,在运用于自定义组件时是个不错的选择</p> <ul><li><img src="https://code.visualstudio.com/assets/updates/1_16/auto-close2.gif" alt="alt"></li></ul></div> <h3 id="javascript-es6-code-snippets"><a href="#javascript-es6-code-snippets" class="header-anchor">#</a> JavaScript (ES6) code snippets</h3> <div class="custom-block tip"><p>这款个插件提供了一些es6内置的代码快，是否安装看个人喜好</p></div> <h3 id="vetur"><a href="#vetur" class="header-anchor">#</a> Vetur</h3> <div class="custom-block tip"><p>如果你时一个vue的开发者，或者对vue感兴趣，那姆 <strong><code>Vetur</code></strong> 属于必装插件。里面提供了vue的语法高亮、代码快、格式整理等等功能，让你的vue开发变得无比丝滑，没有它我甚至都不会写vue了</p></div> <h3 id="eslint"><a href="#eslint" class="header-anchor">#</a> ESLint</h3> <div class="custom-block tip"><p>**<code>ESLint</code>**可以检查你的js代码是否书写规范，第一是因为它足够有名，第二则是它的功能确实强大，要开启它的完全体模式需要阅读官方文档的配置，可以使你的代码格式更加符合你自己的习惯</p> <blockquote><p>比如是否以分号结尾</p></blockquote></div> <h3 id="小程序插件合集"><a href="#小程序插件合集" class="header-anchor">#</a> 小程序插件合集</h3> <div class="custom-block tip"><ol><li>小程序开发助手</li> <li>minapp</li> <li>vscode wxml</li> <li>小程序助手</li> <li>wxml</li></ol> <blockquote><p>以上插件都可以只在小程序的单独工作区为其打开，作为小程序开发者，VScode对其也有强大的支持性，个人认为开发体验胜过于微信开发工具</p></blockquote></div> <h2 id="通用篇"><a href="#通用篇" class="header-anchor">#</a> 通用篇</h2> <div class="custom-block tip"><p>通用篇介绍的往往是一些工具类的插件，往往运用的范围更为广泛，依赖度也更高</p></div> <h3 id="prettier"><a href="#prettier" class="header-anchor">#</a> Prettier</h3> <div class="custom-block tip"><p>Prettier整合了许多语言的代码格式整理，属于必装插件</p> <ul><li><strong>代码整理的插件建议只安装一个，我个人偏向于这款，<code>Beautify</code> 也是不错的选择之一，完全看个人喜好</strong></li></ul></div> <h3 id="bracket-pair-colorizer"><a href="#bracket-pair-colorizer" class="header-anchor">#</a> Bracket Pair Colorizer</h3> <div class="custom-block tip"><ul><li><strong><code>Bracket Pair Colorizer</code></strong> 可以让你代码中的括号，非对组的颜色变得不同，让代码变得更有辨识度，某种意义上说也使得代码也变得更加美观优雅</li> <li><img src="https://github.com/CoenraadS/Bracket-Pair-Colorizer-2/raw/develop/images/consecutiveExample.png" alt="Bracket Pair Colorizer"></li></ul></div> <h3 id="path-intellisense"><a href="#path-intellisense" class="header-anchor">#</a> Path Intellisense</h3> <div class="custom-block tip"><p><strong><code>Path Intellisense</code></strong> 的作用在于，当你在输入<code>/</code> 或者 <code>./</code> 时，会自动的在项目目录或者当前的相对路径匹配文件名，对于使用vscode来说，这个插件属于必装插件</p></div> <h3 id="draw-io-integration"><a href="#draw-io-integration" class="header-anchor">#</a> Draw.io Integration</h3> <div class="custom-block tip"><p><strong><code>Draw.io Integration</code></strong> 可以在vscode中绘制流程图，可以满足绝大多数的需求，可能对比专业的流程图软件操作不是那么丝滑，主要就是为了装b。</p></div> <h3 id="korofileheader"><a href="#korofileheader" class="header-anchor">#</a> koroFileHeader</h3> <div class="custom-block tip"><p>**<code>koroFileHeader</code>**会自动在文件的头部生成注释，记录如 <strong>文件生成日期、最后编辑时间、描述</strong>等信息，这个是否使用时看个人的，它本身也支持很多的配置实现更灵活的运用</p> <ul><li><img src="https://raw.githubusercontent.com/OBKoro1/koro1FileHeader/master/images/example.gif" alt="alt"></li></ul></div> <h3 id="colorful-comments"><a href="#colorful-comments" class="header-anchor">#</a> Colorful Comments</h3> <div class="custom-block tip"><p><strong><code>Colorful Comments</code></strong> 可以更换你注释的高亮色，让代码可读性变高
-<img src="https://github.com/Parth2031/Colorful-Comments/raw/master/Images/Colorful-Comments.png" alt="alt"></p></div> <h3 id="vscode-icons"><a href="#vscode-icons" class="header-anchor">#</a> vscode-icons</h3> <div class="custom-block tip"><p>这个插件也是我个人认为最值得安装的插件之一，一款编辑器好不好用，很大程度在于它好不好看，一款好看的编辑器，可以让我们写代码时变得更加舒心，这款插件会格局你文件的后缀和文件夹名称，改变文件图标的显示，增强目录的可读性和风格</p> <p>-<img src="https://raw.githubusercontent.com/vscode-icons/vscode-icons/master/images/screenshot.gif" alt="vscode-icons"></p></div> <h3 id="gitlens"><a href="#gitlens" class="header-anchor">#</a> GitLens</h3> <div class="custom-block tip"><p>GitLens 也是vscode中大名鼎鼎的插件，可以查看git中历史的版本</p> <ul><li><img src="https://raw.githubusercontent.com/eamodio/vscode-gitlens/main/images/docs/revision-navigation.gif" alt="alt"></li></ul></div> <h3 id="markdown-all-in-one-和-markdown-preview-enhanced"><a href="#markdown-all-in-one-和-markdown-preview-enhanced" class="header-anchor">#</a> Markdown All in One 和 Markdown Preview Enhanced</h3> <div class="custom-block tip"><p>如果你喜欢使用vscode编写markdown文档，那么以上两款插件也是里面的不三选择</p> <ul><li>第一款可以让vscode编辑器对markdown文档有全方面的支持，包括但不限于内置代码块、快捷键、代码整理，总之装上就对了，好东西我们从不嫌多</li> <li>第二款可以在编辑器旁边打开一个实时预览的界面</li> <li><img src="https://user-images.githubusercontent.com/1908863/28199365-bb03a570-682a-11e7-8f65-d7d2b258d583.png" alt="Markdown Preview Enhanced"></li></ul></div> <h3 id="关于编辑器的风格"><a href="#关于编辑器的风格" class="header-anchor">#</a> 关于编辑器的风格</h3> <div class="custom-block tip"><p>插件中提供了海量的皮肤可供选择，在插件中搜索<code>category:themes</code>,可以看到很多不乏百万级别下载量的皮肤，很多皮肤具有强烈的风格满足特殊的喜好</p> <ul><li>例如这一款<code>Winter is Coming Theme</code> 的皮肤，作为一个冰火粉丝来说，难以抵抗</li></ul></div> <h2 id="摸鱼篇"><a href="#摸鱼篇" class="header-anchor">#</a> 摸鱼篇</h2> <div class="custom-block tip"><p>一个不会摸鱼的程序员，不是一个号程序员，敲代码之余，一点要学会适当的娱乐来保证身心健康，而如何摸鱼而不被老板发现，在同事面前装逼，显得尤为关键，请容许我向大家推荐以下几款插件，打开vscode的隐藏功能</p></div> <h3 id="小霸王"><a href="#小霸王" class="header-anchor">#</a> 小霸王</h3> <div class="custom-block tip"><p>拥有小霸王我们就实现了在vscode玩小霸王的能力，游戏好不好玩不关键，怎么玩，怎么装逼很关键</p> <ul><li>安装后在左侧菜单找到小霸王的选项，在<code>remote</code>中右键下载，等待下载完毕就可以开启游戏之旅了</li></ul></div> <h3 id="zhihu-on-vscode"><a href="#zhihu-on-vscode" class="header-anchor">#</a> Zhihu On VSCode</h3> <div class="custom-block tip"><p>如何刷知乎又看起来像是在工作？这款插件就可以做到，里面实现了日常逛知乎的绝大多数功能</p></div> <h3 id="掘金"><a href="#掘金" class="header-anchor">#</a> 掘金</h3> <div class="custom-block tip"><p>是的你没看错，插件名字就叫<code>掘金</code>，有时候我真的不得不佩服那些大佬，总是又独特的思路，安装这个插件之后，就可以在vscode中刷掘金了，具体使用可以看插件介绍</p></div> <h2 id="关于插件的配置"><a href="#关于插件的配置" class="header-anchor">#</a> 关于插件的配置</h2> <div class="custom-block tip"><ol><li>点击左下角配置图标-&gt;选择设置</li> <li>在设置界面的右上角会发现一个打开设置的图标，点击后会打开一个<code>settings.json</code>的文件。在此文件内，将设置的内容写入即可完成配置，部分插件的设置在写入后需要重启才会生效
<img src="/assets/img/settings.3bad68fc.png" alt="alt"></li> <li>设置分为两种 <code>用户区</code>代表全局配置，<code>工作区</code>则只在当前编辑器打开的目录生效,当你更改工作区的配置后，在项目的根目录就会出现<code>.vscode</code>的文件夹保存着你的配置，<code>工作区</code>的权级大于用户区<code>用户区</code></li></ol></div></div> <footer class="page-edit" style="display:none;"><div class="edit-link"><a href="https://gitee.com/kuangweiwudi/my-node/edit/master/tool/vscode/plug-recommend.md" target="_blank" rel="noopener noreferrer">提出错误！</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <!----> <!----> <ul class="side-bar sub-sidebar-wrapper" style="width:12rem;" data-v-3fb51744><li class="level-2" data-v-3fb51744><a href="/tool/vscode/plug-recommend.html#前言" class="sidebar-link" data-v-3fb51744>前言</a></li><li class="level-2" data-v-3fb51744><a href="/tool/vscode/plug-recommend.html#前端篇" class="sidebar-link" data-v-3fb51744>前端篇</a></li><li class="level-3" data-v-3fb51744><a href="/tool/vscode/plug-recommend.html#live-server" class="sidebar-link" data-v-3fb51744>Live Server</a></li><li class="level-3" data-v-3fb51744><a href="/tool/vscode/plug-recommend.html#open-in-browser" class="sidebar-link" data-v-3fb51744>open in browser</a></li><li class="level-3" data-v-3fb51744><a href="/tool/vscode/plug-recommend.html#easy-sass-和-easy-less" class="sidebar-link" data-v-3fb51744>easy sass 和 easy less</a></li><li class="level-4" data-v-3fb51744><a href="/tool/vscode/plug-recommend.html#easy-sass-的配置" class="sidebar-link" data-v-3fb51744>easy sass 的配置</a></li><li class="level-4" data-v-3fb51744><a href="/tool/vscode/plug-recommend.html#easy-less-的配置" class="sidebar-link" data-v-3fb51744>easy less 的配置</a></li><li class="level-3" data-v-3fb51744><a href="/tool/vscode/plug-recommend.html#auto-rename-tag" class="sidebar-link" data-v-3fb51744>Auto Rename Tag</a></li><li class="level-3" data-v-3fb51744><a href="/tool/vscode/plug-recommend.html#auto-close-tag" class="sidebar-link" data-v-3fb51744>Auto Close Tag</a></li><li class="level-3" data-v-3fb51744><a href="/tool/vscode/plug-recommend.html#javascript-es6-code-snippets" class="sidebar-link" data-v-3fb51744>JavaScript (ES6) code snippets</a></li><li class="level-3" data-v-3fb51744><a href="/tool/vscode/plug-recommend.html#vetur" class="sidebar-link" data-v-3fb51744>Vetur</a></li><li class="level-3" data-v-3fb51744><a href="/tool/vscode/plug-recommend.html#eslint" class="sidebar-link" data-v-3fb51744>ESLint</a></li><li class="level-3" data-v-3fb51744><a href="/tool/vscode/plug-recommend.html#小程序插件合集" class="sidebar-link" data-v-3fb51744>小程序插件合集</a></li><li class="level-2" data-v-3fb51744><a href="/tool/vscode/plug-recommend.html#通用篇" class="sidebar-link" data-v-3fb51744>通用篇</a></li><li class="level-3" data-v-3fb51744><a href="/tool/vscode/plug-recommend.html#prettier" class="sidebar-link" data-v-3fb51744>Prettier</a></li><li class="level-3" data-v-3fb51744><a href="/tool/vscode/plug-recommend.html#bracket-pair-colorizer" class="sidebar-link" data-v-3fb51744>Bracket Pair Colorizer</a></li><li class="level-3" data-v-3fb51744><a href="/tool/vscode/plug-recommend.html#path-intellisense" class="sidebar-link" data-v-3fb51744>Path Intellisense</a></li><li class="level-3" data-v-3fb51744><a href="/tool/vscode/plug-recommend.html#draw-io-integration" class="sidebar-link" data-v-3fb51744>Draw.io Integration</a></li><li class="level-3" data-v-3fb51744><a href="/tool/vscode/plug-recommend.html#korofileheader" class="sidebar-link" data-v-3fb51744>koroFileHeader</a></li><li class="level-3" data-v-3fb51744><a href="/tool/vscode/plug-recommend.html#colorful-comments" class="sidebar-link" data-v-3fb51744>Colorful Comments</a></li><li class="level-3" data-v-3fb51744><a href="/tool/vscode/plug-recommend.html#vscode-icons" class="sidebar-link" data-v-3fb51744>vscode-icons</a></li><li class="level-3" data-v-3fb51744><a href="/tool/vscode/plug-recommend.html#gitlens" class="sidebar-link" data-v-3fb51744>GitLens</a></li><li class="level-3" data-v-3fb51744><a href="/tool/vscode/plug-recommend.html#markdown-all-in-one-和-markdown-preview-enhanced" class="sidebar-link" data-v-3fb51744>Markdown All in One 和 Markdown Preview Enhanced</a></li><li class="level-3" data-v-3fb51744><a href="/tool/vscode/plug-recommend.html#关于编辑器的风格" class="sidebar-link" data-v-3fb51744>关于编辑器的风格</a></li><li class="level-2" data-v-3fb51744><a href="/tool/vscode/plug-recommend.html#摸鱼篇" class="sidebar-link" data-v-3fb51744>摸鱼篇</a></li><li class="level-3" data-v-3fb51744><a href="/tool/vscode/plug-recommend.html#小霸王" class="sidebar-link" data-v-3fb51744>小霸王</a></li><li class="level-3" data-v-3fb51744><a href="/tool/vscode/plug-recommend.html#zhihu-on-vscode" class="sidebar-link" data-v-3fb51744>Zhihu On VSCode</a></li><li class="level-3" data-v-3fb51744><a href="/tool/vscode/plug-recommend.html#掘金" class="sidebar-link" data-v-3fb51744>掘金</a></li><li class="level-2" data-v-3fb51744><a href="/tool/vscode/plug-recommend.html#关于插件的配置" class="sidebar-link" data-v-3fb51744>关于插件的配置</a></li></ul></main> <!----></div></div></div></div><div class="global-ui"><div class="back-to-ceiling" style="right:1rem;bottom:6rem;width:2.5rem;height:2.5rem;border-radius:.25rem;line-height:2.5rem;display:none;" data-v-c6073ba8 data-v-c6073ba8><svg t="1574745035067" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5404" class="icon" data-v-c6073ba8><path d="M526.60727968 10.90185116a27.675 27.675 0 0 0-29.21455937 0c-131.36607665 82.28402758-218.69155461 228.01873535-218.69155402 394.07834331a462.20625001 462.20625001 0 0 0 5.36959153 69.94390903c1.00431239 6.55289093-0.34802892 13.13561351-3.76865779 18.80351572-32.63518765 54.11355614-51.75690182 118.55860487-51.7569018 187.94566865a371.06718723 371.06718723 0 0 0 11.50484808 91.98906777c6.53300375 25.50556257 41.68394495 28.14064038 52.69160883 4.22606766 17.37162448-37.73630017 42.14135425-72.50938081 72.80769204-103.21549295 2.18761121 3.04276886 4.15646224 6.24463696 6.40373557 9.22774369a1871.4375 1871.4375 0 0 0 140.04691725 5.34970492 1866.36093723 1866.36093723 0 0 0 140.04691723-5.34970492c2.24727335-2.98310674 4.21612437-6.18497483 6.3937923-9.2178004 30.66633723 30.70611158 55.4360664 65.4791928 72.80769147 103.21549355 11.00766384 23.91457269 46.15860503 21.27949489 52.69160879-4.22606768a371.15156223 371.15156223 0 0 0 11.514792-91.99901164c0-69.36717486-19.13165746-133.82216804-51.75690182-187.92578088-3.42062944-5.66790279-4.76302748-12.26056868-3.76865837-18.80351632a462.20625001 462.20625001 0 0 0 5.36959269-69.943909c-0.00994388-166.08943902-87.32547796-311.81420293-218.6915546-394.09823051zM605.93803103 357.87693858a93.93749974 93.93749974 0 1 1-187.89594924 6.1e-7 93.93749974 93.93749974 0 0 1 187.89594924-6.1e-7z" p-id="5405" data-v-c6073ba8></path><path d="M429.50777625 765.63860547C429.50777625 803.39355007 466.44236686 1000.39046097 512.00932183 1000.39046097c45.56695499 0 82.4922232-197.00623328 82.5015456-234.7518555 0-37.75494459-36.9345906-68.35043303-82.4922232-68.34111062-45.57627738-0.00932239-82.52019037 30.59548842-82.51086798 68.34111062z" p-id="5406" data-v-c6073ba8></path></svg></div></div></div>
    <script src="/assets/js/app.892efb48.js" defer></script><script src="/assets/js/3.3689c535.js" defer></script><script src="/assets/js/1.76946483.js" defer></script><script src="/assets/js/14.791ae1f2.js" defer></script>
  </body>
</html>
